<template>
  <div class="customer">
    <div class="customerinfo">
      <img src="@/common/img/touxiang.png" />
      <div class="customerinfo-info">
        <div class="customercode"><span>{{ customer.name }}</span></div>
        <!-- <div class="creaetedate"><span>{{ customer.member_lv_id }}</span></div> -->
      </div>
    </div>
    <div class="achievement">
      <div class="ordersum">
        <div>累计订单</div>
        <div class="data">{{ customer.order_num }}</div>
      </div>
      <!-- <div class="salesum">
        <div>累计销售</div>
        <div class="data">{{ customer.salesum }}</div>
      </div> -->
      <!-- <div class="phone">
        <div>手机号</div>
        <div class="data">{{ customer.mobile }}</div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { toRefs } from "vue";
export default {
  props: {
    customer: {
      type: Object,
      //     "name":"小叮当",   //昵称
      //  "member_id":"112312334231332342423",   //主推广人下会员ID
      //  "member_lv_id":"1",  等级
      //  "mobile":"19988983984",    //电话
      //  "order_num":"6"      //交易订单数量
      //  "member_refer_id":"98098789"      //推广id
      //  "parents_id":"122234322"      //主推广人id
        
    },
  },
  setup(props) {
    return { ...toRefs(props.customer) };
  },
};
</script>
<style lang="scss" scoped>
.customer {
      margin: 1.5rem 0;
    border: 1px solid #f7f7f7;
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
  .customerinfo {
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    padding: 1rem 0;
    img {
      width: 5rem;
    }
    .customerinfo-info {
      display: flex;
      flex-direction: column;
      align-items: baseline;
      justify-content: space-evenly;
      margin-left: 20px;
      span{
          font-size: 1.6rem;
          margin-left: 5px;
      }
      .creaetedate{
          span{
             color: #737373;
              background: #f7f8fa;
              padding: 0rem 1rem;
              border-radius: 1rem;
              font-size: 1.2rem; 
          }
      }
    }
  }
    .achievement > div {
          display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f7f7f7;
      .data{
          font-size: 14px;
          color: #737373;
      }
    }
}
</style>